
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="test"></div>
</body>
</html>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel" >
 //  21-09-30 东城区航星  
 
class Login extends React.Component{
            state = {              //1_在state中添加一个值_作为表单元素的value值_控制表单元素值的来源_来源是一个状态
                username:'',
                password:''
            }
            
            saveusername = (e)=>{
                // console.log(e.target.value)
                this.setState({
                    username:e.target.value
                })
            }
            savepassword = (e)=>{
                // console.log(e.target.value)
                this.setState({
                    password:e.target.value
                })
            }
            submit = (e)=>{
                e.preventDefault()
                const {username,password} = this.state
                alert(`你的用户是：${username},你的密码是${password}`)
               
            }
            render(){
                return (
                    <div>
                        <form action="http://www.baidu.com">
                                                            {/*2_给表单元素绑定onchang事件_将表单的值设置为state的值_控制表单元素值的变量_更新一个状态*/}
                            <label>用户名：</label><input onChange={this.saveusername} type="text" />
                            <label>密码：</label><input onChange={this.savepassword} type="password" />
                            <button onClick={this.submit}>登录</button>
                        </form>
                    </div>
                )
            }
        }
        ReactDOM.render(<Login/>,document.getElementById('test'))
/*

//受控组将常见元素 
      1文本框,2富文本框,3下拉,4复选框  表单元素 、
   html中<input> <textarea> <select>这类表单元素会维持自生状态
   并根据用户输入进行更新 
   但React中 可变的状态通常保存在组件的this.state中 且只能用setState()方法进行更新   
   大多数情况下 使用受控组件实现表单是首选的 在受控组件中 表单数据是交由React组件处理的  
   (React 将 state 与表单元素值 value 绑定到一起，由 state 的值来控制表单元素的值)

//处理都是一样的  复选框是操作checked属性值    
    //操作流程 
       //1 在state中添加一个值，作为表单元素的value值        （控制表单元素值的来源）
       //2 为表单元素绑定change事件，将表单的值设为state的值 （控制表单元素值的变量）
/* 示例代码   
        state = {txt：“”}                                   //来源是一个状态  
        <input type="txt" value={this.state.txt}            //更新一个状态 
            onChange = {e=>this.setState({txt:e.target.value})}
        />
*/





</script>
